<template>
	<view class="page">
		<view class="qrcode-box">
			<uv-qrcode
				ref="qrcode"
				value="https://h5.uvui.cn"
				:options="qrcodeOptions"
			></uv-qrcode>
		</view>
		<view class="qrcode-desc">
			<text>使用GVIM APP扫一扫，加我为好友</text>
		</view>
	</view>
	<view class="qrcode-save">
		<view class="qrcode-save-icon" @click="handleSaveQrcode">
			<u-icon name="download" size="38"></u-icon>
		</view>
	</view>
</template>

<!-- 
 感谢 https://www.uvui.cn/components/qrcode.html 
 -->

<script setup>
import {ref, toRefs} from "vue"
import {onLoad, onReady} from "@dcloudio/uni-app"
const qrcode = ref(null)
let qrcodeOptions = ref({
	data: "data",
	size: "450rpx",
	margin: 10,
	backgroundColor: '#ffffff',
	foregroundImageSrc:"/static/logo.png"
})

function handleSaveQrcode() {
	qrcode.value.save({
		success: () => {
			console.log("保存成功")
		}
	})
}
onReady(() => {

})
</script>

<style>
	page {
		background-color: #42b883;
	}
</style>

<style lang="scss" scoped>
	
	.page {
		padding: 60rpx 0 60rpx 0;
		margin: 40rpx 60rpx 40rpx 60rpx;
		background-color: #ffffff;
		border-radius: 20px;
		.qrcode-username{
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		.qrcode-box {
			height: 600rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			// background-color: red;
		}
		.qrcode-desc{
			display: flex;
			flex-direction: row;
			justify-content: center;
			text{
				color: gray;
			}
		}
	}
	.qrcode-save{
		display: flex;
		flex-direction: row;
		justify-content: center;
		margin-top: 100rpx;
		.qrcode-save-icon{
			background-color: #ffffff;
			padding: 15rpx;
			border-radius: 50%;
		}
	}
</style>